<template>
    <el-table :data="tableData"
     v-loading="tableLoading" 
     :border="border">
    <el-table-column
        v-for="(item,index) in columns"
        :width="item.width"
        :align="item.align?item.align:'center'"
        :label="item.label"
        :prop="item.prop">
        <template v-slot="{row}">
            <slot :name="item.prop" :row="row">
               {{getProp(row,item)}}
            </slot>
        </template>
     </el-table-column>
  
    </el-table>  
</template>
<script setup>
//处理传递的属性名是xxx[0].xxx
let getProp=(row,item)=>{
    let reg=/^(.+)\[(\d+)\]\.?(.*)$/
let matched=item.prop.match(reg)
if(matched){
    let arr=row[matched[1]]
    let prop=arr[matched[2]]
    let prop2=prop[matched[3]]
    return prop2
}
return row[item.prop]
}


//定义表格的属性
let props=defineProps({
    "tableData":{
          type:Array
    },
    "columns":{
          type:Array
    },
    "tableLoading":{
          type:Boolean,
          default(){
              return false
          }
    },
    "border":{
        type:Boolean,
        default(){
            return true
        }
    }
})
//使用方式
//给表格传递的属性
//1.tableData表格对应的数据
//2.columns 每一列的属性描述，动态表头等等
//columns 传递类型      属性
//        数组[]   label:'表头',prop:'数据对应的字段','width',
//插槽：
//通过指定具名插槽  具名（同columns中的prop），可以自定义表格的内容
</script>
